<template>
	<view class="myAttendPage">
		<view class="attendMonth" @click="selectMonth">
			{{selectedTime}} >
		</view>
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
		<view class="charts-box" style="width:100%;height:140px;">
		  <qiun-data-charts
			canvasId="wqerqwerqwers"
			:canvas2d="true"
			:opts="opts"
			type="ring"
			:chartData="chartData"
			:errorShow="false"
			:animation="false"
			:tooltipShow="false"
		  />
		</view>
		<view class="attendChart">
			<view class="attendChartItem">
				<text class="attendChartNum themeColor">{{attendDay}}</text>
				<text class="attendChartTxt">实际出勤(天)</text>
			</view>
			<view class="attendChartItem">
				<text class="attendChartNum absentColor">{{notAttendDay}}</text>
				<text class="attendChartTxt red">未出勤(天)</text>
			</view>
		</view>
		<view class="attendSplitLine"></view>
		<view class="attendInfo">
			<view class="attendInfoItem" v-for="(item,key) in attendLst" :key="key">
				<text class="attendInfoNum" :class="{'bold':item.num > 0}">{{item.num}}</text>
				<text class="attendInfoTxt">{{item.title}}</text>
			</view>
		</view>
		<view class="columnChart">
			<view class="totalTitle">考勤统计表 ( 最近6个月 )</view>
			<view class="charts-box" style="width:100%;height:416.66rpx;">
			  <qiun-data-charts			  
				canvasId="eshiahifdas"
				:canvas2d="true"
				:opts="meterOpts"
				type="column"
				:chartData="meterData"
				:errorShow="false"
				:animation="false"
				:tooltipShow="false"
			  />
			</view>
		</view>
		<view class="totalTitle">
			当年假期余额
		</view>
		<view class="holidayInfo">
			<view class="holidayItem" v-for="(item,key) in holidayData" :key="key">
				<view class="holidayTitle" :style="{backgroundColor:item.color}">{{item.title}}</view>
				<view class="holidayDetail">
					<text>总计可请天数</text>
					<text>{{item.total}}</text>
				</view>
				<view class="holidayDetail">
					<text>已经使用天数</text>
					<text>{{item.used}}</text>
				</view>
				<view class="holidayDetail">
					<text>未使用天数</text>
					<text>{{item.notUsed}}</text>
				</view>
			</view>
		</view>
		
		<custom-tab-bar curUrl="/pages/home/myAttend"/>
	</view>
</template>

<script>
import customTabBar from '../components/customTabBar.vue'
export default {
	name: '',
	components: {
		customTabBar
	},
	data() {
		return {
			opts:{
				"title": {
				    "name": this.$moment().daysInMonth() - 8,
				    "fontSize":20,
				    "color": "#000000",
				    "offsetX": 0,
				    "offsetY": -1
				},
				"subtitle": {
				    "name": "应出勤(天)",
				    "fontSize": 12,
				    "color": "#000000",
				    "offsetX": 0,
				    "offsetY": 0
				},
			},
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			selectedTime:this.$moment().format('YYYY-MM'),
			show:false,
			chartData:{},
			attendLst:[],
			attendDay:0,
			notAttendDay:0,
			meterData:{},
			meterOpts:{
				"extra": {
					"column": {
						"type": "meter",
						"meterFillColor": "#e5fdc3"
					},
				},
				yAxis: {
					min:0
				}
			},
			holidayData:[{
				color:'#8b7ffe',
				title:'年假',
				total:'10.00',
				used:'2.00',
				notUsed:'8.00'
			},{
				color:'#61a4ed',
				title:'调休',
				total:'2.00',
				used:'1.50',
				notUsed:'0.50'
			},{
				color:'rgb(0, 150, 136)',
				title:'事假',
				total:'0.00',
				used:'0.00',
				notUsed:'0.00'
			}]
		}
	},
	methods: {
		getRandomNum(minNum,maxNum){ 
		    switch(arguments.length){ 
		        case 1: 
		            return parseInt(Math.random()*minNum+1,10); 
		        break; 
		        case 2: 
		            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
		        break; 
		            default: 
		                return 0; 
		            break; 
		    } 
		},
		selectMonth(){
			this.show = true
		},
		getAttendLst(){
			let titleLst = ['迟到','严重迟到','早退','严重早退','旷工','漏签']
			let attendLst = []
			titleLst.forEach(item => {
				let attendItem = {
					num:this.getRandomNum(0,3),
					title:item
				}
				attendLst.push(attendItem)
			})
			this.attendLst = attendLst
		},
		getChartData(selectMonth){
			let actualAttend = this.getRandomNum(18,20)
			let totalAttend = this.$moment(selectMonth).daysInMonth() - 8
			this.chartData ={
			  categories:[],
			  series:[{
				  "data": [
					  {
						  "name": "实际出勤",
						  "value": actualAttend
					  },
					  {
						  "name": "未出勤",
						  "value": totalAttend - actualAttend
					  }
				  ]}
			  ], 
			}
			this.attendDay = actualAttend
			this.notAttendDay = totalAttend - actualAttend
		},
		getMeterData(){
			let monthLst = []
			let totalLst = []
			let attendLst = []
			for(let i = 5;i > -1;i--){
				let curMonth = this.$moment().subtract(i,'month').format('MM')+'月'
				let curDate = this.$moment().subtract(i,'month').format('YYYY-MM')
				let curMonthDays = this.$moment(curDate).daysInMonth() - 8
				let attendDays = this.getRandomNum(15,20)
				totalLst.push(curMonthDays)
				attendLst.push(attendDays)
				monthLst.push(curMonth)
			}
			this.meterData = {
				"categories": monthLst,
				"series": [{
					"name": "应出勤",
					"data": totalLst,
					"color": "#2fc25b"
				}, {
					"name": "实际出勤",
					"data": attendLst,
					"color": "#1890ff"
				}]
			}
		},
		confirm(cb){
			let {year,month} = cb
			this.selectedTime = `${year}-${month}`
			this.getChartData(`${year}-${month}`)
			let totalAttend = this.$moment(this.selectedTime).daysInMonth() - 8
			this.opts.title.name = totalAttend
			this.getAttendLst()
		}
	},
	onReady(){
		this.getAttendLst()
		this.getChartData(this.selectedTime)
		this.getMeterData()
	},
	 onBackPress(event){
	},
};
</script>

<style scoped lang="scss">
.themeColor{
	color:$themeColor;
}
.absentColor{
	color:#ff0000;
}
.bold{
	font-weight: 700;
	color:#000000;
}
.myAttendPage{
	padding:31.25rpx;
}
.attendMonth{
	color:$themeColor;
}
.attendChart{
	display: flex;
	justify-content: space-around;
	.attendChartItem{
		display: flex;
		flex-direction: column;
		align-items: center;
		.attendChartNum{
			font-size: 37.5rpx;
		}
		.attendChartTxt{
			position: relative;
			padding-left: 20upx;
			&:after {
				content: ' ';
				position: absolute;
				left: 0upx;
				top: 16upx;
				width: 12upx;
				height: 12upx;
				background-color: $themeColor;
				border-radius: 6upx;
			}
		}
		.attendChartTxt.red{
			&:after{
				background-color: #ff0000;
			}
		}
	}
}
.attendSplitLine{
	margin: 31.25rpx 0;
	height: 1px;
	width: 100%;
	background-color: #efefef;
}
.attendInfo{
	display: flex;
	flex-wrap: wrap;
	.attendInfoItem{
		width:calc(100% / 3);
		height: 125rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color:$textColor;
		.attendInfoNum{
			font-size: 33.33rpx;
		}
		.attendInfoTxt{
			font-size: 29.16rpx;
		}
	}
}
.totalTitle{
	margin-top: 62.5rpx;
	padding-bottom: 20.83rpx;
	text-align: center;
	font-weight: 700;
}
.uPicker{
	z-index: 99999;
}
.holidayInfo{
	padding-bottom:104.16rpx;
}
.holidayItem{
	border:1px solid #ccc;
	border-radius:8.33rpx;
	margin-bottom:41.66rpx;
}
.holidayTitle{
	display: flex;
	align-items: center;
	padding:10.41rpx 41.66rpx;
	color: #fff;
	font-size: 25rpx;
	background-color: lighten($color: $themeColor, $amount:6);
}
.holidayDetail{
	padding: 14.58rpx 41.66rpx;
	font-size: 25rpx;
	display: flex;
	justify-content: space-between;
}
</style>
